<style lang="scss" scoped>
@import '@/assets/css/variable';
.applyManage1{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: $main-bgc-gray;
	// .page{
	// 	width: 100%;
	// 	height: 100%;
	// 	position: relative;
	// 	box-sizing: border-box;
		.timeBox{
			display: flex;
			height: 50px;
			align-items: center;
			// justify-content: space-around;
			background-color: white;
			color: $color3;
			border-bottom: 1px solid #e9e9e9;
			box-shadow: 2px 2px 2px #e7e7e7;
			box-sizing: border-box;
			// background-color: red;
			.time{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 1.5rem 1.6rem;
				font-size: 1.4rem;
			}
		}
		.list {
			// padding-bottom: 1rem;
			background-color: $main-bgc-gray;
			padding: 1rem;
			overflow-y: scroll;
			position: absolute;
			top: 50px;
			width: 100%;
			bottom: 0;
			box-sizing: border-box;
			.item {
				margin-bottom: 1rem;
				// margin-left: 1rem;
				// margin-right: 1rem;
				padding: 0.8rem 0.8rem;
				background-color: white;
				border-radius: 0.8rem;
				position: relative;
				overflow: hidden;
				.rightImg{
					position: absolute;
					right: -1.2rem;
					top: -1.2rem;
				}
				.flex {
					display: flex;
					padding-bottom: 0.8rem;
					.flex-left {
						flex: 0 0 80px;
						height: 70px;
						border-radius: 0.6rem;
						overflow: hidden;
						position: relative;
						.tag{
							background-color: #FE280B;
							padding: 0.2rem 0.5rem;
							border-bottom-left-radius: 0.8rem;
							color:white;
							position: absolute;
							right: 0;
							top: 0;
							border: 0.1rem solid white;
							.text{
								font-size: 11px;
								// transform: scale(0.8); //缩放0.8倍
								color:white;
								display: block;
							}
						}
					}
					.flex-right {
						flex: 1;
						margin-left: 0.8rem;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
							width: 90%;
							// min-width: 140px;
							// max-width: 160px;
						}
						.desc {
							display: flex;
							align-items: center;
							span {
								color: $color2;
		
								&.split {
									font-size: 1rem;
								}
							}
						}
						.line{
							display: flex;
							align-items: center;
							.adorn{
								color: $adornColor;
								i{
									font-size: 1.6rem;
								}
							}
							.imgBox{
								position: relative;
								flex: 1;
								display: flex;
								align-items: center;
								.vanImage{
									position: absolute;
									box-sizing: border-box;
									border: 1px solid white;
								}
							}
						}
					}
				}
			}
		}
	// }
}
</style>

<template>
	<div class="applyManage1">
		<!-- <div class="page"> -->
			<van-action-sheet v-model="showPop" :actions="actions" @select="onSelect"/>
			<div class="timeBox" @click="showPop=!showPop">
				<div class="time">
					<span class="text">{{selectTime}}</span>
					<span class="margL-m"><van-icon name="arrow-down" /></span>
				</div>
			</div>
			
			<div class="list">
				<van-list
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="CoursesPages"
				  offset="100"
				>
				<!-- CoursesPages -->
					<!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
					<div class="item" v-for="item in courseData" :key="item.id" @click="toDetailView(item,'apply')">
						<div class="flex">
							<div class="flex-left">
								<van-image width="80" height="70" fit="cover" :src="item.course.images"/>
								<div class="tag" v-if="item.course.type==2">
									<span class="text">线下课</span>
								</div>
							</div>
							<div class="flex-right">
								<div class="title">{{item.course.name}}</div>
								<div class="desc">
									<span>已报名人数</span>
								</div>
								<div class="line">
									<div class="adorn"><i>{{item.user.num}}</i><span class="fs-10" style="margin-left: 0.2rem;">人</span></div>
									<div class="imgBox margL-l" v-if="item.user">
										<van-image class="vanImage" v-for="(uitem,index) in item.user" :key="index" :style="{zIndex:item.user.length-index,left:(18*index-(5*index))/10+'rem'}" round width="18" height="18" fit="cover" :src="uitem.avatar"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
		<!-- </div> -->
	</div>
</template>

<script>
import {Dialog,Toast} from 'vant';
import {myMixins} from "@/assets/js/mixins.js"
export default {
	name: 'applyManage1',
	mixins: [myMixins],
	components:{
		[Dialog.name]:Dialog,
		[Toast.name]:Toast
	},
	data() {
		return {
			list: [],
			actions: [{ name: '全部',id: '' }, { name: '本星期',id: 7 }, { name: '本月度',id: 30 }, { name: '本季度',id: 90 }, { name: '本年度',id: 365} ],
			selectTime: '时间',
			showPop:false,
			active1: '',
			active2: '',
			active3: '',
			active4: '',
			textStatus: 0,
			text1: '状态',
			text2: '类型',
			text3: '分类',
			text4: '时间',
			option_act: null,
			option1: [
				{ text: '全部', value: 0},
				{ text: '一星期内', value: 1},
				{ text: '一个月内', value: 2},
				{ text: '一年内', value: 3},
			],
			userInfo:'',
			campus_id:'',
			user_type:'',
			loading:false,
			finished:false,
			courseData: [],
			pageNo:1,
			pageSize:6,
			time:''
		}
	},
	watch: {
		// 监视是否选择了
		textStatus(newValue) {
			this.option_act = this.option3.filter(item => {
				if(newValue === item.value) {
					return item
				}
			})
			console.log(this.option_act)
		}
	},
	created() {
		this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
		this.campus_id = localStorage.getItem('campus_id')
		this.user_type = localStorage.getItem('user_type')
	},
	mounted() {
		// this.courseData = this.$store.state.courseData
		// this.CoursesPages()
	},
	methods: {
		toDetailView(item,fromView) {
			console.log(item)
			if(item.course.type==2){
				this.$router.push(`/course/detail4xx?id=${item.course.id}&course_id=${item.course.id}&type=${item.course.type}&fromView=${fromView}&campus_id=${item.campus_id}`)
			}else{
				this.$router.push(`/course/detail4xs?id=${item.course.id}&course_id=${item.course.id}&type=${item.course.type}&fromView=${fromView}&campus_id=${item.campus_id}`)
			}
		},
		onLoad() {
		      // 异步更新数据
		      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
		      setTimeout(() => {
		        for (let i = 0; i < 10; i++) {
		          this.list.push(this.list.length + 1);
		        }
		
		        // 加载状态结束
		        this.loading = false;
		
		        // 数据全部加载完成
		        if (this.list.length >= 100) {
		          this.finished = true;
		        }
		      }, 1000);
		    },
		CoursesPages() {
			// this.onLoad()
			const _this = this;
			let params = {
				type:2,
				time:this.time,
				campus: this.campus_id,
				user_type: this.user_type,
				pageNo: this.pageNo,
				pageSize: this.pageSize
			}
			this.loading = true;
			_this.$request.CoursecampusPages(params).then(res => {
				console.log('----------------------------', res)
				let data = res.data.data
				// _this.courseData = data
				_this.courseData.push(...data)
				console.log(_this.pageNo,'======',(Math.ceil(res.data.totalCount / _this.pageSize)),_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize)))
				if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
					_this.finished = true;
				} else {
					_this.pageNo++
				}
				// this.$store.commit('setCaseList', this.caseList);
			}).finally(res=>{
				console.log("finished", this.finished)
				// this.finished = true
				this.loading = false;
			})
		},
		onSelect(item) {
		  // 默认情况下点击选项时不会自动收起
		  // 可以通过 close-on-click-action 属性开启自动收起
		  this.showPop = false;
		  console.log(item.name)
		  this.time = item.id
		  console.log(item.name,this.time)
		  this.selectTime = item.name
		  this.pageNo=1
		  this.courseData = []
		  this.CoursesPages()
		},
	}
}
</script>